<script setup>
  import { ref } from 'vue'
  import { CreateCircleComment } from '@/apis/circle'

  const popup = ref()
  const comment = ref('')

  const props = defineProps({
    id: Number
  })
  const emit = defineEmits(['refresh'])

  function openPopup() {
    popup.value.open()
  }

  function handleCancel() {
    comment.value = ''
    popup.value.close()
  }

  async function handleSubmit() {
    await CreateCircleComment({
      circleID: props.id,
      content: comment.value
    }).then((res) => {
      uni.showToast({
        title: '评论成功',
        icon: 'success'
      })
    })
    await emit('refresh')
    handleCancel()
  }

  defineExpose({
    openPopup
  })
</script>

<template>
  <uni-popup @maskClick="handleCancel" ref="popup" background-color="#fff" type="bottom">
    <view style="padding: 20rpx">
      <uni-easyinput type="textarea" autoHeight v-model="comment" placeholder="请输入评论" trim focus></uni-easyinput>
      <button @click="handleSubmit" style="margin-top: 10rpx" type="primary">评论</button>
    </view>
  </uni-popup>
</template>

<style lang="scss" scoped>
  .popup {
    padding: 10rpx;
    height: 30vh;
  }
</style>
